<template>
	<div class="container">
		<header class="customHeaderStyle">
			<!-- <router-link :to="'/main/profile'"> -->
				<div class="go-back" @click="turn">
					<i></i>
					<i></i>
					<i></i>
				</div>
			<!-- </router-link>	 -->
				<div class="headerCustomTitle">我的二维码</div>
		</header>
		<div style="height:3rem;"></div>
		<div class="member"><img src="static/image/member.jpg" alt=""></div>
		<qr-code id="qr" :text="message"></qr-code>
		<div class="inner">
			<p class="prerogative">我的特权</p>
			<div class="line_top">

				<div>
					<i class="icon njfont nj-huiyuanqia" style="color:#82b3e0;"></i>
					<span>会员专享价</span>
				</div>
				<div>
					<i class="icon njfont nj-jifen1" style="color:#ddc27b;"></i>
					<span>累计积分</span>
				</div>
				<div>
					<i class="icon njfont nj-youhuiquan" style="color:#e28b8b;"></i>
					<span>使用优惠券</span>
				</div>
			</div>
		</div>

	</div>
</template>
<script>
	import {mapMutations, mapActions, mapGetters} from "vuex";
	import VueQRCodeComponent from 'vue-qrcode-component'
	export default {
		data(){
			return {
				message:'',//二维码数据
			}
		},
		computed: {
		  ...mapGetters('wxh', [
		    'sessionId',
		    'userInfo',
		    'login'
		  ])
		},
		components: {
			'qr-code' : VueQRCodeComponent
		},
		async beforeMount() {
			await this.getUserInfo();
			await this.initData();
		},
		methods: {
		  ...mapActions('wxh', [
		    'getUserInfo'
		  ])
		  ,
		  ...mapMutations('wxh', [
		    'USER_INFO',
		    'ClEAR_SESSIONID',
		    'LOGO_OUT',
		    'LOGO_IN',
		    'CLEAR_INFO'
		  ])
		  ,
		  async initData(){
		    // this.showLoading();
		  	await this.reFreshUserInfo(this);
		  	let info = {
		  		userId:this.userInfo.userid,
		  		phone: this.userInfo.mobile,
		  		vipname: this.userInfo.vipname,
		  		remainingscore: this.userInfo.remainingscore
		  	}
		  	this.message = JSON.stringify(info);
		  	// let a = document.getElementById('qr').childNodes[1];
		  	// a.style.margin='auto';
		  	// a.style.marginTop = '5rem';
		  },
		  turn(){
		  	if(this.$route.query.Page){
		  		this.$router.go(-1);
		  	} else {
		  		// this.$router.push({path:'/main/profile'});
		  		this.$router.push({name:'profile'});
		  	}

		  }
		}
	}
</script>

<style scoped>
.customHeaderStyle{
		position: relative;
		background: #fff;
		min-height: 3rem;
		border-bottom: 1px solid #eaeaea;
		color: #444;
		font-weight: 700;
		left: 0;
		top: 0;
		line-height: 2.25rem;
		/* z-index: 2; */
		width: 100%;
		font-size: .9rem;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	.headerCustomTitle{
		overflow: hidden;
		right: 6rem;
		font-weight: 500;
		min-height: 2.25rem;
		position: absolute;
		margin: 0;
		text-align: left;
		white-space: nowrap;
		left: 3rem;
		width: auto;
		text-overflow: ellipsis;
		z-index: 2;
		font-size: 1.1rem;
		margin-top: .35rem;
		top: 1px;
	}
	#app{
		background: #fff;
	}
	#qr{
		margin:auto;
		margin-top:2rem;
		display: flex;
		justify-content: space-around;
		width: 55%;
		height: 30%;
	}
	.member {
		margin: auto;
		margin-top: 1rem;
		width: 90%;
	}
	.container {
    background: #fff;
    height: 100%;

	}
	.line_top {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		width: 80%;
		margin: auto;
		margin-top:2rem;
		height: 4rem;
    align-items: center;
    border-top: 1px solid #eaeaea;
	}
  .line_top div {
    display: flex;
    flex-grow: 1;
    justify-content: space-around;
  }
	.prerogative {
		display: inline-block;
		width: 6rem;
		height: 1rem;
		position: absolute;
		margin: auto;
    margin-top: -.5rem;
    background: #fff;
    top: 0;
    left: 35%;
    color: #999999;
	}
	.inner {
		position: relative;
	}

</style>
